<template>
  <view>
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="AI模拟背题 " :background="background">
      <view class="u-nav-slot" slot="right" @click="addPapers">
      </view>
    </u-navbar>
    <view class="container">
      <view class="container_header">
        <view class="container_header_tag row">
          <u-tag v-for="(item, index) in categoryType" :text="item.label"
            :type="index === tagIndex ? 'warning' : 'success'" @click="handleTagClick(index,item)" />
        </view>
      </view>
      <view class="container——title">
        {{tagType}}
      </view>
      <view class="container_body">
        <view class="container_one">
          <image class="container_one_img1" src="../../static/AIimages/tiku.png" mode="" @click="reciteHandle">
          </image>
          <view class="">
            常考背题
          </view>
          <image class="container_one_img2" src="../../static/AIimages/gonggu.png" @click="handle1('gonggu')"></image>
          <view class="">
            巩固背题
          </view>
        </view>
        <!-- 易错题 -->
        <view class="container_two" @click="commonMistakes('yicuo')">
          <image class="container_one_img3" src="../../static/AIimages/AI (1).png" mode=""></image>
        </view>
        <view class="container_three">
          <image class="container_one_img4" src="../../static/AIimages/yicuo.png" mode="" @click="changjing"></image>
          <view class="">
            场景背题
          </view>
          <image class="container_one_img5" src="../../static/AIimages/beiti.png" mode="" @click="handle1('lianxiang')">
          </image>
          <view class="">
            联想背题
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="container">
      <view class="container_one">
        <image class="container_one_img1" src="../../static/AIimages/tiku.png" mode="" @click="handle1('changkao')">
        </image>
        <view class="">
          常考背题
        </view>
        <image class="container_one_img2" src="../../static/AIimages/gonggu.png" @click="handle1('gonggu')"></image>
        <view class="">
          巩固背题
        </view>
      </view>
      <view class="container_two" @click="handle1('yicuo')">
        <image class="container_one_img3" src="../../static/AIimages/AI (1).png" mode=""></image>
      </view>
      <view class="container_three">
        <image class="container_one_img4" src="../../static/AIimages/yicuo.png" mode="" @click="changjing"></image>
        <view class="">
          场景背题
        </view>
        <image class="container_one_img5" src="../../static/AIimages/beiti.png" mode="" @click="handle1('lianxiang')">
        </image>
        <view class="">
          联想背题
        </view>
      </view>
    </view> -->
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
  import {
    methods
  } from '../../libs/mixin/template_page_mixin';
  import {
    getExamAPI
  } from '@/api/addPaper/addpaper.js'
  import store from '@/store/modules/user.js';

  export default {
    data() {
      return {
        categoryId: 1,
        tagIndex: 0,
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        curLib: '常考考点背题',
        libs: ['mh_secur_4', 'mh_secur_5'],
        typeL: 'changkao',
        tagType: '竞赛学习',
      };

    },
    created() {
      this.$store.dispatch('getCategoryType')
    },
    computed: {
      categoryType() {
        return store.state.categoryType
      }
    },
    methods: {
      reciteHandle() {
        uni.navigateTo({
          url: '../recitePaper/recitePaper'
        })
      },
      backIndex() {
        uni.navigateback();
      },
      handleTagClick(index, item) {
        this.tagIndex = index;
        this.tagType = item.label
        this.categoryId = item.value
      },
      //易错题
      commonMistakes(type) {
        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: async (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type
              },
              apifunc: {
                examList: this.getExamList
              },
              title: '常考考点背题',
              typeL: this.typeL
            })
          }
        })
      },

      //场景背题
      changjing() {
        uni.navigateTo({
          url: './scenceSubject/scenceSubject'
        })
      },
      //易错背题
      //常考背题
      handle1(type) {
        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: async (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type
              },
              apifunc: {
                examList: this.getExamList,
                examItemList: this.getExamItemList
              },
              title: '常考考点背题',
              typeL: this.typeL
            })
          }
        })

      },
      getExamList() {
        return new Promise((resolve, reject) => {
          const param = {
            categoryId: this.categoryId,
            questionBankName: '极速背题'
          }
          getExamAPI(param).then((res) => {
            resolve(res.data)

          })
        })
      },
      getExamItemList() {
        return new Promise((resolve, reject) => {
          const param = {
            id: this.categoryId,
          }
          getExamAPI(param).then((res) => {
            resolve(res.data)

          })
        })
      }

    }
  }
</script>

<style lang="scss">
  @keyframes fadeInScale {
    0% {
      opacity: 0;
      transform: scale(0.2);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .container_one_img1,
  .container_one_img2,
  .container_one_img3,
  .container_one_img4,
  .container_one_img5 {
    animation: fadeInScale 0.5s ease-in-out forwards;
  }

  .container {
    margin-top: 10rpx;
    margin-bottom: 100rpx;

    .container_header {

      margin-top: 10rpx;
      margin-bottom: 100rpx;
      padding: 20rpx;
      margin: 20rpx;
      background-color: aliceblue;
      border-radius: 20rpx;

      .container_header_tag {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-evenly;
        align-items: center;
        text-align: center;

        .u-tag {
          width: 140rpx;
          margin: 5px;
          /* 根据需要调整间距 */
        }
      }

    }

    .container——title {
      text-align: center;
      padding: 20rpx;
      margin: 20rpx;
      background-color: aliceblue;
      border-radius: 20rpx;
    }



    .container_body {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 50rpx;
      margin-bottom: 100rpx;
      padding: 20rpx;
      margin: 20rpx;
      height: 600rpx;
      background-color: aliceblue;
      border-radius: 20rpx;

      .container_one {
        .container_one_img1 {
          display: block;
          width: 100rpx;
          height: 100rpx;
          margin-top: 20rpx;
        }

        .container_one_img2 {
          display: block;
          width: 100rpx;
          height: 100rpx;
          margin-top: 100rpx;


        }
      }

      .container_two {
        .container_one_img3 {
          display: block;
          width: 250rpx;
          height: 250rpx;
          // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }
      }

      .container_three {
        .container_one_img4 {
          display: block;
          width: 100rpx;
          height: 100rpx;
          margin-top: 20rpx;
        }

        .container_one_img5 {
          width: 100rpx;
          height: 100rpx;
          margin-top: 100rpx;
        }
      }
    }


  }
</style>